<template>
  <view class="notice">
    <view class="notice-title">
      <view class="notice-title-left">
        <text class="title-text">公告 </text>
        <text class="iconfont icon-gonggao"></text>
      </view>
      <view class="notice-title-right" @click="more">
        <text class="notice-title-more">更多</text>
      </view>
    </view>
    <view class="notice-content">
      <view class="notice-container">
        <view
          class="notice-list"
          v-for="(item, index) in noticeListData"
          :key="index"
          :class="{ bg: index == isActive }"
          @touchstart="readTouch(index)"
          @touchend="readNotice(item, index)"
          @touchmove="touchMove"
        >
          <view class="list-left">
            <view class="list-content-icon">
              <text class="iconfont icon-dian icon-dian"></text>
            </view>
            <view>{{ item.title }}</view>
          </view>
          <view class="list-right">{{ item.date }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noticeListData: this.noticeList,
      isActive: 0.5,
      timeOutEvent: 1,
    };
  },
  props: {
    noticeList: Array,
  },
  watch: {
    noticeList(val) {
      this.noticeListData = val;
      console.log("new");
    },
  },
  components: {},
  created() {
    console.log("ddddf");
    //  this.requestData();
  },

  methods: {
    more() {
      uni.navigateTo({ url: "/pages/home/notice/NoticeList/NoticeList" });
    },
    readTouch(index) {
      this.isActive = index;
      this.timeOutEvent = 1;
    },
    touchMove() {
      // clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
    },
    readNotice(item, index) {
      this.isActive = 0.5;
      if (this.timeOutEvent != 0) {
        uni.navigateTo({
          url: "/pages/home/notice/NoticeReader/NoticeReader?id=" + item.id,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.notice {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  .notice-title {
    padding-top: 10rpx;
    display: flex;
    .notice-title-left {
      flex: 1;
      .title-text {
        font-size: 45rpx;
        color: #4cd964;
      }
    }

    .notice-title-right {
      flex: 0 0 75rpx;
      display: flex;
      align-items: center;
      color: #20b1ff;
      font-size: 30rpx;
      .notice-title-more {
        display: flex;
        align-items: center;
      }
    }
  }
  .notice-content {
    margin: 20rpx 20rpx 10rpx 20rpx;
    box-sizing: border-box;
    height: 500rpx;
    background-color: #ffffff;
    border-radius: 15rpx;
    .notice-container {
      // padding: 0 10rpx;
      padding-top: 3rpx;
      box-sizing: border-box;

      .notice-list {
        color: #666;
        padding: 0 10rpx;
        height: 82rpx;
        font-size: 26rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        border-bottom: 1rpx solid rgba(219, 217, 217, 0.705);
        .list-left {
          display: flex;
          align-items: center;
          .icon-dian {
            color: rgb(126, 131, 122);
            font-size: 24rpx;
          }
        }
        .list-right {
          display: flex;
          align-items: center;
        }
      }
      .bg {
        background-color: rgba(214, 210, 210, 0.63);
      }
      // .notice-list :last-child {
      //   border: none;
      //   // color: rgb(168, 27, 27);
      // }
    }
    .notice-container :last-child {
      border: none;
    }
  }
}
</style>
